<template>
  <div class="index-home">
    <div class="top">
      <div class="top-left">
        <div class="count">
          <div class="count-left">
            <div>在线车辆数量</div>
            <div style="display: flex; margin-top: 10px; align-items: center">
              <img src="@/assets/images/car.png" width="20" alt="" />
              <div style="display: flex; align-items: flex-end">
                <span style="font-size: 24px; font-weight: bold; margin: 0 7px 0 16px">512</span> 辆
              </div>
            </div>
          </div>
          <div style="width: 1px; height: 43px; background: #fff"></div>
          <div class="count-left">
            <div>司机数量</div>
            <div style="display: flex; margin-top: 10px; align-items: center">
              <img src="@/assets/images/dirver.png" width="16" alt="" />
              <div style="display: flex; align-items: flex-end">
                <span style="font-size: 24px; font-weight: bold; margin: 0 7px 0 16px">5123</span> 人
              </div>
            </div>
          </div>
        </div>
        <div class="left-table">
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ background: '#3751FF !important', color: '#fff' }"
            :cell-style="cellStyle"
          >
            <el-table-column prop="num" label="车牌" />
            <el-table-column prop="name" label="司机姓名" />
            <el-table-column prop="address" label="地址" />
          </el-table>
        </div>
      </div>
      <div class="top-center">
        <img src="@/assets/images/11.png" style="position: absolute; left: 185px; top: 18px" alt="" />
        <img src="@/assets/images/22.png" style="position: absolute; right: 26px; top: 92px" alt="" />
      </div>
      <div class="top-right">
        <el-table
          :data="tableData2"
          style="width: 100%"
          :header-cell-style="{ background: '#3751FF !important', color: '#fff' }"
          :cell-style="cellStyle"
        >
          <el-table-column prop="num" label="车牌" />
          <el-table-column prop="time" label="时间" width="240" />
          <el-table-column prop="info" label="报警信息" />
        </el-table>
      </div>
    </div>
    <div class="btm">
      <div class="btm-left">
        <div style="padding: 18px 0 0 16px; color: #fff">报警信息</div>
        <div></div>
      </div>
      <div class="btm-right">
        <div style="padding: 18px 0 0 16px; color: #fff">车辆位置</div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import * as echarts from 'echarts';
const cache = ref([]);
const commandstats = ref(null);
const usedmemory = ref(null);
const { proxy } = getCurrentInstance();
const tableData = [
  {
    num: '11',
    name: '22',
    address: '33',
  },
  {
    num: '11',
    name: '22',
    address: '33',
  },
  {
    num: '11',
    name: '22',
    address: '33',
  },
  {
    num: '11',
    name: '22',
    address: '33',
  },
  {
    num: '11',
    name: '22',
    address: '33',
  },
  {
    num: '11',
    name: '22',
    address: '33',
  },
  {
    num: '11',
    name: '22',
    address: '33',
  },
  {
    num: '11',
    name: '22',
    address: '33',
  },
];
const tableData2 = [
  {
    num: '鲁B21421',
    time: '2023年8月8日20:03:21',
    info: '打瞌睡',
  },
  {
    num: '鲁B21421',
    time: '2023年8月8日20:03:21',
    info: '打瞌睡',
  },
  {
    num: '鲁B21421',
    time: '2023年8月8日20:03:21',
    info: '打瞌睡',
  },
  {
    num: '鲁B21421',
    time: '2023年8月8日20:03:21',
    info: '打瞌睡',
  },
  {
    num: '鲁B21421',
    time: '2023年8月8日20:03:21',
    info: '打瞌睡',
  },
  {
    num: '鲁B21421',
    time: '2023年8月8日20:03:21',
    info: '打瞌睡',
  },
  {
    num: '鲁B21421',
    time: '2023年8月8日20:03:21',
    info: '打瞌睡',
  },
];
const cellStyle = row => {
  // console.log(row, column, rowIndex, columnIndex);
  if (row.rowIndex % 2 === 0) {
    return { background: '#1E3365', color: '#fff' };
  } else {
    return { background: '#172955', color: '#fff' };
  }
};
function getList() {
  proxy.$modal.loading('正在加载缓存数据，请稍候！');
  // getCache().then(response => {
  proxy.$modal.closeLoading();
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: '2%',
      right: '4%',
      bottom: '14%',
      top: '16%',
      containLabel: true,
    },
    legend: {
      data: ['疲劳驾驶', '吸烟', '打电话'],
      right: 10,
      top: 12,
      textStyle: {
        color: '#fff',
      },
      itemWidth: 12,
      itemHeight: 10,
      // itemGap: 35
    },
    xAxis: {
      type: 'category',
      data: ['2023-07-31', '2023-08-01', '2023-08-02', '2023-08-03', '2023-08-04'],
      axisLine: {
        lineStyle: {
          color: 'white',
        },
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: 'Microsoft YaHei',
        },
      },
    },

    yAxis: {
      type: 'value',
      max: '1200',
      axisLine: {
        show: false,
        lineStyle: {
          color: 'white',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.3)',
        },
      },
      axisLabel: {},
    },
    dataZoom: [
      {
        show: true,
        height: 12,
        xAxisIndex: [0],
        bottom: '8%',
        start: 10,
        end: 90,
        handleIcon:
          'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle: {
          color: '#d3dee5',
        },
        textStyle: {
          color: '#fff',
        },
        borderColor: '#90979c',
      },
      {
        type: 'inside',
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
    ],
    series: [
      {
        name: '1',
        type: 'bar',
        barWidth: '15%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#fccb05',
              },
              {
                offset: 1,
                color: '#f5804d',
              },
            ]),
            barBorderRadius: 12,
          },
        },
        data: [400, 400, 300, 300, 300],
      },
      {
        name: '2',
        type: 'bar',
        barWidth: '15%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#8bd46e',
              },
              {
                offset: 1,
                color: '#09bcb7',
              },
            ]),
            barBorderRadius: 11,
          },
        },
        data: [400, 500, 500, 500, 500],
      },
      {
        name: '3',
        type: 'bar',
        barWidth: '15%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#248ff7',
              },
              {
                offset: 1,
                color: '#6851f1',
              },
            ]),
            barBorderRadius: 11,
          },
        },
        data: [400, 600, 700, 700, 1000],
      },
    ],
  };
}
setTimeout(() => {
  // getList();
}, 1000);
</script>

<style scoped lang="scss">
.index-home {
  width: 100%;
  height: calc(100vh - 50px);
  background: linear-gradient(0deg, #10224d 0%, #0a193f 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .top {
    display: flex;
    .top-left {
      .count {
        width: 412px;
        height: 91px;
        background: url('../assets/images/bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        .count-left {
          flex: 1;
          margin-left: 32px;
        }
      }
      .left-table {
        margin-top: 17px;
        height: 320px;
        background: #172955;
        border-radius: 2px;
        border: 1px solid #0aa0ff;
        overflow-y: auto;
      }
    }
    .top-center {
      width: 725px;
      height: 430px;
      margin: 0 25px;
      background: url('../assets/images/2.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
    }
    .top-right {
      width: 473px;
      height: 430px;
      background: #172955;
      border: 1px solid #0aa0ff;
      border-radius: 2px;
      overflow-y: auto;
    }
  }
  .btm {
    margin-top: 19px;
    display: flex;
    .btm-left {
      width: 1164.3px;
      height: 367px;
      background: #172955;
      border: 1px solid #0aa0ff;
      border-radius: 2px;
    }
    .btm-right {
      margin-left: 19px;
      width: 474px;
      background: #172955;
      border: 1px solid #0aa0ff;
      border-radius: 2px;
    }
  }
}
</style>
